<script setup>
import { ref } from 'vue'
const emits = defineEmits(['add'])
const inputValue = ref('')
const addEvent = () => {
  if (inputValue.value) {
    emits('add', {
      id: Date.now(),
      name: inputValue.value,
      done: false
    })
    inputValue.value = ''
  }
}
</script>

<template>
  <header class="header">
    <h1>todos</h1>
    <input
      v-model.trim="inputValue"
      @keyup.enter="addEvent"
      class="new-todo"
      placeholder="What needs to be done?"
      autofocus
    />
  </header>
</template>

<style lang="less" scoped></style>
